<template>
  <div class="container-width bg app-container" flex="main:center ">
            <img class="bg_2" src="../../../src/assets/images/bg/bg_2.png" />
    <div class="warp">
  
      <img class="logo" src="../../../src/assets/images/bg/logo.png" />

      <!-- 用户登录 -->
      <div  v-if="pageData.activeIndex === 0">
          <loginBycode v-if="pageData.loginType" ref="userPhone" refName="userPhone"></loginBycode>
          <loginByPassword v-else ref="userPassword" refName="userPassword"></loginByPassword>
          <p flex="main:justify" style="display:flex; justify-content: space-between; ">
            <span @click="changeType" class="change-type" >{{pageData.loginType?'密码登录':"手机登录"}}</span><span  class="change-type" @click="findPassword">注册账号</span>
          </p>
        </div>

      <el-button class="btn" @click="login" round>登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {reactive, ref, onMounted } from 'vue';
  import loginBycode from "./loginBycode.vue";
  import loginByPassword from "./loginByPassword.vue";

  import router from "/@/router";

  const login_phone = 1
  const login_passowrd = 0
  const user_login = 0

  const pageData = reactive({
    loginType: login_phone, 
    activeIndex : user_login,
  });
  
  const userPhone = ref(); // 获取 组件 ref="userPhone"
  const userPassword = ref();

  // onMounted(() =>{
  //    console.log(userPhone.value);
  // });

  // loginType = ref(0) 不行 ， v-if="loginType" 不生效

  const changeType = () => {
    pageData.loginType = pageData.loginType === login_phone?login_passowrd:login_phone;
  };

  const findPassword = () => {
    router.push({ name:'login-register' }); // 自动生成的 路由地址
  };

  const login = () => {
    if( pageData.loginType === login_phone){
      userPhone.value.submit();
      //this.$refs.userPhone.submit()
    }else{
      userPassword.value.submit();
      //this.$refs.userPassword.submit()
    }

    // if(this.activeIndex === user_login){
    //   if( this.loginType === login_phone){
    //       this.$refs.userPhone.submit()
    //   }else{
    //       this.$refs.userPassword.submit()
    //   }
    // }else{
    //   this.$refs.school.submit()
    // }
  }

</script>

<style lang="scss" scoped>
.warp {
  width: 300px;
  position: absolute;
  right: 120px;
 
}
.label {
  width: 50%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: relative;
  cursor: pointer;
}
.label-warp{
    margin-bottom: 20px;
}
.active {
  color: #ff5f19;
}
.active::after {
  content: "";
  height: 2px;
  width: 4em;
  background: #ff5f19;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: border 0.2s;
}
@keyframes border {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
  }
}
.change-type{
    cursor: pointer;
}
.change-type:hover{
        color: #ff5f19;
}
.btn{
    width: 100%;
    margin-top:20px;
    font-size:16px;
    color: #ffffff;
    background:#ff5f19
}
.bg{
    background-image: url("../../assets/images/bg/login_bg.png");
    background-size: 100% 100%;
    height:100vh;
    position: relative;
}
.logo{
  width: 120px;
  margin: 80px auto 80px;
  display: block;
}
.bg_2{
  width: 330px;
  position:absolute;
  right: 0;
  top: 0;
}
</style>